
<!-- <h1>会员列表</h1> -->
<script setup lang='ts'>
import { ref, onMounted, watchEffect } from "vue";
import { ElTable } from "element-plus";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import userManagementhooks from "../../hooks/userManagement";
import userManagementStore from "../../store/userManagement";
import { RouterLink } from "vue-router";

const store = userManagementStore();

// input输入框
const userPhone = ref("");
const userName = ref("");
// 时间筛选框
const imputTime = ref("");

//表数据
const menbershipList = ref<Array<any>>([]);
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const count = ref<number>();
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};

// 数据加载
const loginUser = (): void => {
  // createTime:string,limit:string,nickname:string,page:number,phone:string
  let limit: number = pageSize.value;
  let page: Number = currentPage.value;
  let createTime: string = imputTime.value;
  let name: string = userName.value;
  let phone: string = userPhone.value;
  // console.log(123);
  userManagementhooks.pageUser(createTime, limit, name, page, phone);
  // console.log("多选框数据", store.getUserDta);
};
const data = [];
// 搜索
const search = (Id) => {
  // console.log(Id);
  let id = Id;
  userManagementhooks.userById(id);
  store.setUserId(id)
};

watchEffect(() => {
  menbershipList.value = store.getUserDta.data;
  count.value = store.getUserDta.count;
});

onMounted(() => {
  // 页面加载完成后执行的函数
  loginUser();
  // console.log("表格数据", menbershipList);
  // console.log(store.setPageVipCardList);
});

interface User {
  date: string;
  name: string;
  address: string;
}
// 列表数据
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);

// 列表多选框点击事件
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const checked1 = ref(false);
const selectValue = ref("");
const options = [
  {
    value: "0",
    label: "启用",
  },
  {
    value: "1",
    label: "禁用",
  },
  {
    value: "2",
    label: "删除",
  },
];
</script>
<!-- 模型 -->
<template>
  <div class="">
    <!-- 查询条 -->
    <el-row class="top">
      <el-col :span="5"
        ><el-input v-model="userPhone" placeholder="用户电话"
      /></el-col>
      <el-col :span="5"
        ><el-input v-model="userName" placeholder="用户昵称"
      /></el-col>
      <el-col :span="5">
        <el-date-picker
          v-model="imputTime"
          type="registrationDate"
          placeholder="请选择注册时间"
          size="default"
        />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" :icon="Search" @click="loginUser"
          >搜索</el-button
        >
      </el-col>
    </el-row>

    <!-- 列表 -->
    <div style="text-align: center">
      <el-table
        ref="multipleTableRef"
        :data="menbershipList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="姓名"  align="center" />
        <el-table-column prop="phone" label="电话" align="center" />
        <el-table-column
          prop="cardType"
          label="会员卡"
          align="center"
        />
        <el-table-column
          prop="vipLevel"
          label="会员等级"
          align="center"
        />
        <el-table-column
          prop="address"
          label="教练"
          align="center"
        />
        <el-table-column label="账户启用状态" width="120" align="center">
          <!-- 0 启用 1 禁用 -->
          <template #default="{ row }">
            <el-tag class="ml-2" :type="row.status == 0 ? '' : 'danger'">{{
              row.status == 0 ? "正常" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <router-link
              :to="{ path: '/MembershipDetails', query: { id: row.id } }"
            >
              <el-button :icon="Search" @click="search(row.id)" size="small"
                >查看详情</el-button
              >
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-row class="footer">
      <el-col :span="24" >
        <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="float:right"
        />
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="less">
.top {
  margin-bottom: 10px;
  
}
.footer {
  margin-top: 10px;
}
</style>